<template>
    <div class="show-blog">
      <el-row type="flex" :gutter="10" justify="space-around">
        <el-col :span="5"><personal-info class="personal-info"></personal-info></el-col>
        <el-col :span="13"><article-lister class="article-lister"></article-lister></el-col>
        <el-col :span="5"><personal-info class="personal-info"></personal-info></el-col>
      </el-row>
    </div>
</template>

<script>
import PersonalInfo from '@/components/PersonalInfo'
import ArticleLister from '@/components/article/ArticleLister'
export default {
  name: 'ShowBlog',
  components: {
    PersonalInfo,
    ArticleLister
  }
}
</script>

<style scoped>
    .show-blog {

    }
    .personal-info{
        background: #f1f5ff;
        border-radius: 2rem;
        box-shadow: 0.5rem 0.5rem  1rem rgba(0, 0, 33, 0.1),-0.5rem -0.5rem 1rem rgba(255, 255, 255, 1);
    }

    .article-lister{
        overflow: auto;
        background: #f1f5ff;
        border-radius: 2rem;
        box-shadow: 0.5rem 0.5rem  1rem rgba(0, 0, 33, 0.1),-0.5rem -0.5rem 1rem rgba(255, 255, 255, 1);
    }
</style>
